<template>
  <div class="container-shell">
    <div calss="container" ref="container"></div>
  </div>
</template>
  <script>
export default {
  name: "WidgetJessibuca",
  props: {
    videoUrl: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      jessibuca: null,
    };
  },
  computed: {},
  watch: {
    videoUrl: {
      handler(newVal) {
        this.$nextTick(() => {
          this.create();
        });
      },
      deep: true,
      immediate: true,
    },
  },
  beforeDestroy() {
    this.initVideo();
  },
  mounted() {
    // this.create();
    // window.onerror = (msg) => (this.err = msg);
  },
  // unmounted() {
  //   this.jessibuca.destroy();
  // },
  methods: {
    initVideo() {
      if (this.jessibuca) {
        this.jessibuca.destroy();
      }
    },
    create(options) {
      options = options || {};
      this.initVideo();
      this.jessibuca = new window.JessibucaPro(
        Object.assign(
          {
            container: this.$refs.container,
            videoBuffer: 0.2, // 缓存时长
            decoder: "./jessibucapro/decoder-pro.js",
            // decoder: "/decoder.js",
            isResize: false,
            useWCS: true,
            useMSE: true,
            text: "",
            // recordType: ".mp4",
            // background: "bg.jpg",
            loadingText: "疯狂加载中...",
            // hasAudio:false,
            debug: false,
            supportDblclickFullscreen: true,
            showBandwidth: false, // 显示网速
            operateBtns: {
              fullscreen: true,
            //   screenshot: true,
              play: true,
            //   audio: true,
            //   record: true,
            },
            forceNoOffscreen: false,
            isNotMute: true,
            timeout: 5,
          },
          options
        )
      );
      if (this.videoUrl) {
        this.jessibuca.play(this.videoUrl);
      }
      this.jessibuca.on("load", function () {
        // console.log("on load");
      });

      this.jessibuca.on("log", function (msg) {
        // console.log("on log", msg);
      });
      this.jessibuca.on("record", (msg) => {
        // console.log("on record:", msg);
      });
      this.jessibuca.on("recordStart", function (msg) {
        // console.log("on record:", msg);
      });
      this.jessibuca.on("recordEnd", (msg) => {
        // console.log("on record:", msg);
      });
      this.jessibuca.on("pause", function () {});
      this.jessibuca.on("play", function () {});
      this.jessibuca.on("fullscreen", function (msg) {
        // console.log("on fullscreen", msg);
      });

      this.jessibuca.on("mute", function (msg) {
        // console.log("on mute", msg);
        //静音
      });

      // this.jessibuca.on("mute", function (msg) {
      //   // console.log("on mute2", msg);
      // });

      this.jessibuca.on("audioInfo", function (msg) {
        // console.log("audioInfo", msg);
      });

      // this.jessibuca.on("bps", function (bps) {
      //   // console.log('bps', bps);
      // });
      // let _ts = 0;
      // this.jessibuca.on("timeUpdate", function (ts) {
      //     console.log('timeUpdate,old,new,timestamp', _ts, ts, ts - _ts);
      //     _ts = ts;
      // });

      this.jessibuca.on("videoInfo", function (info) {
        // console.log("videoInfo", info);
      });

      this.jessibuca.on("error", function (error) {
        // console.log("error", error);
      });

      this.jessibuca.on("timeout", function () {});

      this.jessibuca.on("start", function () {
        // 如果有截图需求。需要延迟一下，因为代码中无法感应到画面被渲染出来了。
        // 1s 之后截图
        // setTimeout( ()=> {
        //   this.jessibuca.screenshot("image", "png", 0.5)
        // }, 1 * 1000)
        // console.log('frame start');
      });

      this.jessibuca.on("performance", function (performance) {
        //性能
      });
      this.jessibuca.on("buffer", function (buffer) {
        // console.log('buffer', buffer);
      });

      this.jessibuca.on("stats", function (stats) {
        // console.log('stats', stats);
      });

      this.jessibuca.on("kBps", function (kBps) {
        // console.log('kBps', kBps);
      });

      this.jessibuca.on("play", () => {});

      this.jessibuca.on("recordingTimestamp", (ts) => {
        // console.log('recordingTimestamp', ts);
      });
    },
  },
};
</script>
  <style scoped lang="scss">
.container-shell {
  position: relative;
  backdrop-filter: blur(5px);
  width: 100%;
  height: 100%;
  /* box-shadow: 0 10px 20px; */
}

.container {
  background: rgba(13, 14, 27, 0.3);
  width: 100%;
  height: 100%;
}
</style>